<template>
  <div class="father">
    <h3>父组件</h3>
    <!-- v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- 上面的代码本质如下 -->
    <!-- <input
      type="text"
      :value="username"
      @input="username = (<HTMLInputElement>$event.target).value"
    /> -->
    <!-- v-model用在组件标签上 -->
    <!-- <AtguiguInput v-model="username" /> -->
    <!-- 上面的代码本质如下 -->
    <!-- <AtguiguInput :modelValue="username" @update:modelValue="username = $event" /> -->

    <!-- 修改 modelValue：可以不使用默认的属性名 modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password" />
  </div>
</template>
<script setup lang="ts" name="Father">
import { ref } from 'vue'
import AtguiguInput from './AtguiguInput.vue'
// v-model 实现  父<--->子 双向通信
let username = ref('zhansgan')
let password = ref('password')

// $event到底是什么？什么时候能.target
// 对于 dom 原生事件，$event就是事件对象 ====> 能.target
// 对于自定义事件，$event就是触发事件时，所传递的数据 => 不能.target
</script>
<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
